<template>
    <div class="box">
        <!-- 顶部logo开始 -->
        <div class="logo"></div>
        <!-- 顶部logo结束 -->
        <!-- 搜索框开始 -->
        <div class="search">
            <van-search
            v-model="value"
            shape="round"
            background="#f00"
            placeholder="请输入搜索关键词"
            />
        </div>
        <!-- 搜索框结束 -->
        <!-- 轮播图开始 -->
        <div class="banner">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="banner in banners" :key="banner.id">
                        <img :src="banner.image" alt="">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- 轮播图结束 -->
        <!-- 推荐分类开始 -->
        <div class="types">
            <div class="type" v-for="type in types" :key="type.id" @click="totype(type.name)">
                <img :src="type.icon" alt="">
                <p>{{type.name}}</p>
            </div>
        </div>
        <!-- 推荐分类结束 -->
        <!-- 推荐的分类和商品开始 -->
        <div class="typePros">
            <!-- 每个 商品和分类 的大盒子 -->
            <div class="typePro" v-for="typePro in tp" :key="typePro.id">
                <!-- 分类名称 -->
                <h3><img src="../../assets/l-icon.png" />{{typePro.name}}<img src="../../assets/r-icon.png" /></h3>
                <!-- 每个分类下的 每个商品 -->
                <div class="product" v-for="product in typePro.products" :key="product.id">
                    <!-- 商品来源 -->
                    <p class="supplier">本商品产自{{product.supplier}}</p>
                    <!-- 商品图片 -->
                    <img :src="product.banner" alt="">
                    <!-- 商品名称 -->
                    <p class="proname">{{product.name}}</p>
                    <!-- 商品规格 -->
                    <p class="specs">商品规格：{{product.specs}}</p>
                    <!-- 商品价格 -->
                    <p class="price">价格：￥{{product.price}}元</p>
                    <!-- 加入购物车 -->
                    <van-button @click="addcart(product)" round type="warning">加入购物车</van-button>
                </div>
            </div>
        </div>
        <!-- 推荐的分类和商品结束 -->
        <!-- 底部导航开始 -->
        <!-- 底部导航结束 -->
    </div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
import Swiper from 'swiper';
import 'swiper/swiper-bundle.min.css'
import { Button } from 'vant';
import {getBanner, getTypes, getTP, addCart} from '@/request'
import {getCookie} from '@/utils/cookie.js'
import { Toast } from 'vant';

Vue.use(Toast);
Vue.use(Button);
Vue.use(Search);
export default {
    // 将导入的文件，当做当前文件的一部分
    data() {
        return {
            value: '',
            // 定义轮播图数据
            banners: [],
            // 定义分类数据
            types: [],
            // 底部使用的数据 - 当前正在显示的标签的下标
            tp: []
        }
    },
    created() {
        // console.log(this.$store.state.aaa);
        
        this.qingqiu()
    },
    // 函数
    methods: {
        async qingqiu() {
            var banners = await getBanner()
            var types = await getTypes()
            var tp = await getTP()
            this.banners = banners
            this.types = types
            this.tp = tp
        },
        addcart(product) {
            // 用一个变量记录这里的this
            var _this = this
            // 获取登录的用户名
            var username = getCookie('username')
            // 如果没有登录
            if(!username) {
                // 提示用户要先登录
                Toast.fail({
                    message: '请先登录！',
                    onClose() { // 提示结束后
                        // 记录当前地址
                        localStorage.setItem('url', '/')
                        // 跳转到登录页
                        _this.$router.push('/my/login')
                    }
                });
                return
            }
            // 用户登录了
            // 给数据中添加用户名和商品数量
            product.username = username
            product.number = 1
            if(product.id) {
                product.pid = product.id
                // 删除掉数据中的id
                delete product.id
            }
            
            addCart(product).then(data => {
                // console.log(data);
                Toast.success(data.msg)
            })
        },
        totype(typename) {
            this.$router.push({path: '/types', query: {typename:typename}})
        }
    },
    // 一刷新页面有了html结构后要执行的代码
    mounted() {
        
    },
    // 当数据更新，重新渲染页面后会执行的代码，就放在updated中
    updated() {
        var swiper = new Swiper(".mySwiper", {
            loop: true,
            autoplay: true,
            pagination: {
                el: ".swiper-pagination",
            },
        });
    }
}
</script>

<style scoped>
/* 大盒子 */
.box{
    background-color: #eee;
}

/* logo开始 */
.logo{
    background-color: #f00;
    background-image: url('../../assets/logo.png');
    background-size: 100% 100%;
    height: 50px;
}
/* logo结束 */
/* 轮播图开始 */
.banner{
    position: relative;
    height: 200px;
    margin: 0 10px;
}
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 轮播图结束 */
/* 推荐分类开始 */
.types{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    background-color: #fff;
    margin: 10px 10px 0;
}
.type img{
    width: 50px;
}
.type{
    margin: 10px 10px;
}
/* 推荐分类结束 */
/* 推荐的商品和分类开始 */
.typePro>h3{
    text-align: center;
}
.typePro>h3 img{
    vertical-align: middle;
    margin: 0 20px;
}
.product{
    background-color: #fff;
    padding: 10px;
    margin: 5px 10px;
    border-radius: 20px;
}
.product .supplier{
    font-size: 18px;
    text-align: center;
}
.product img{
    width: 100%;
    border-radius: 20px;
}
.product .proname, .product .specs{
    font-size: 18px;
    padding: 0 10px;
}
.product .price{
    font-size: 20px;
    font-weight: bold;
    color: #f00;
    padding-left: 10px;
}
.van-button{
    display: block;
    width: 80%;
    font-size: 20px;
    margin: 0 auto;
}
/* 推荐的商品和分类结束 */

</style>